<template>
  <div class="supplier-check setting-content">
    <div class="info-container">
      <h2>
        <span>证照信息</span>
        <!-- 当前审核通过才显示修改 -->
        <el-button v-if="!enterpriseInfo" type="primary" @click="addDrawer" :disabled="isMainUser">添加信息</el-button>
        <el-button v-if="enterpriseInfo?.state == 2" type="primary" @click="showDrawer" :disabled="isMainUser">修改信息</el-button>
      </h2> 
      <div class="info-tips" v-if="enterpriseInfo?.state == 1">企业信息正在审核中，不能修改</div>
      <div class="count-info">
        <ul class="form-data" v-if="enterpriseInfo">
          <li>
            <p class="label">企业名称：</p>
            <p class="value">{{enterpriseInfo.name}}</p>
          </li>
          <li>
            <p class="label">企业性质：</p>
            <p class="value">{{enterpriseInfo.nature}}</p>
          </li>
          <li>
            <p class="label">企业规模：</p>
            <p class="value">{{enterpriseInfo.scale}}</p>
          </li>
          <li>
            <p class="label">企业地址：</p>
            <p class="value">{{enterpriseInfo.position}}</p>
          </li>
          <li>
            <p class="label">统一社会信用代码：</p>
            <p class="value">{{enterpriseInfo.creditCode}}</p>
          </li>
          <li>
            <p class="label">法人：</p>
            <p class="value">{{enterpriseInfo.legalRepresentative}}</p>
          </li>
          <li>
            <p class="label">营业执照：</p>
            <img
              style="width: 150px"
              :src="enterpriseInfo.businessLicense"
            />
          </li>
          <li>
            <p class="label">银行开户名：</p>
            <p class="value">{{enterpriseInfo.bankAccountName}}</p>
          </li>
          <li>
            <p class="label">开户银行：</p>
            <p class="value">{{enterpriseInfo.bankName}}</p>
          </li>
          <li>
            <p class="label">银行账户：</p>
            <p class="value">{{enterpriseInfo.bankAccount}}</p>
          </li>
          <li>
            <p class="label">年检有效期：</p>
            <p class="value">2025-5-5</p>
          </li>
          <li>
            <p class="label">当前状态：</p>
            <p class="value">
              <el-tag v-if="enterpriseInfo.state == 1" type="warning">待审核</el-tag>
              <el-tag v-if="enterpriseInfo.state == 2" type="success">已年检</el-tag>
              <el-tag v-if="enterpriseInfo.state == 3" type="danger">审核失败</el-tag>
              <el-tag v-if="enterpriseInfo.state == 4" type="danger">已过期</el-tag>
            </p>
          </li>
        </ul>
        <div class="ruifox-table-new-no-data" v-else>
          <slot name="noTableData">
            <!-- <i class="iconfont">&#xe642;</i> -->
            <svg t="1728460685872" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8472" width="70" height="70"><path d="M103.424 621.632h13.632c3.84 0 5.76 3.968 5.76 7.872 0 3.84-3.904 5.888-5.76 5.888h-13.632v13.696c0 3.776-4.032 5.76-5.888 5.76-1.92 0-3.904 0-5.888-1.984-1.92-1.856-1.92-1.856-1.92-3.776v-13.696h-13.696c-3.84 0-5.824-4.032-5.824-5.888 0-3.968 3.904-7.872 5.824-7.872h13.696v-13.696c0-3.904 3.904-5.824 7.808-5.824 3.84 0 5.888 1.92 5.888 5.824v13.696z m903.04-54.528v-13.76c0-1.856 0-4.032-1.856-4.032-2.048-1.856-3.904-1.856-5.952-1.856-3.904 0-5.824 1.856-5.824 5.888v13.76h-13.696c-1.92 0-3.968 0-5.76 1.728-1.984 2.112-1.984 4.032-1.984 5.888 0 4.032 3.84 6.08 5.824 6.08h13.76v13.568c0 3.776 3.84 5.888 5.76 5.888 4.032 0 7.872-3.968 7.872-5.888v-13.568h13.568c3.84 0 5.824-3.968 5.824-6.08 0-3.776-3.84-7.616-5.888-7.616h-11.648z m-497.344 224.192H163.776a13.888 13.888 0 0 1-9.728-3.968 14.592 14.592 0 0 1-3.84-9.728c0-7.808 5.824-13.504 13.568-13.504h62.4a63.296 63.296 0 0 1-7.744-27.392V340.736c0-13.632 5.888-29.248 15.616-38.976a54.144 54.144 0 0 1 38.976-15.616h41.024v-13.632c0-13.696 5.76-29.312 15.616-39.04a54.592 54.592 0 0 1 39.04-15.616h329.6c13.696 0 29.312 5.888 38.976 15.616a54.656 54.656 0 0 1 15.68 39.04v397.888a45.824 45.824 0 0 1-7.936 27.456h76.032c7.808 0 13.76 5.632 13.76 13.568a13.44 13.44 0 0 1-13.76 13.568h-163.84v13.632a44.544 44.544 0 0 1-7.68 27.392h7.68c7.936 0 13.76 5.824 13.76 13.568a13.44 13.44 0 0 1-13.76 13.76H585.088a26.688 26.688 0 0 1-3.84 33.088 25.024 25.024 0 0 1-19.456 7.936 25.024 25.024 0 0 1-19.584-7.936l-33.088-35.136z m50.624-27.2h43.008a26.816 26.816 0 0 0 27.328-27.392V338.816c0-15.616-11.84-27.328-25.536-27.328h-331.52a27.84 27.84 0 0 0-27.2 27.328v397.952c0 15.616 11.584 27.392 27.2 27.392h208.704l-7.808-7.936a29.184 29.184 0 0 1-7.808-27.392l-13.696-13.568a98.688 98.688 0 0 1-130.624-13.568 96.32 96.32 0 0 1 3.84-130.688 96.384 96.384 0 0 1 130.816-3.904c38.912 33.152 44.8 89.536 13.696 130.752l13.568 13.568a28.928 28.928 0 0 1 27.264 7.68l48.768 44.992z m97.536-68.288h41.024a26.688 26.688 0 0 0 27.264-27.328V270.592a26.624 26.624 0 0 0-27.264-27.328H370.56a26.624 26.624 0 0 0-27.2 27.328v15.616h259.456c13.632 0 29.184 5.824 38.848 15.616a54.272 54.272 0 0 1 15.616 38.976v355.008zM175.552 192.512h19.456c5.888 0 9.728 3.904 9.728 9.728s-3.84 9.792-9.728 9.792h-19.456v19.456c0 5.888-3.904 9.792-9.728 9.792-2.048 0-5.888-1.92-7.872-3.904s-1.92-3.904-1.92-7.808v-19.456h-21.44c-1.984 0-5.888 0-7.808-3.904-2.048-1.984-3.968-3.904-3.968-7.808 0-5.888 3.968-9.728 9.728-9.728h21.44v-19.584c0-5.888 3.968-9.728 9.728-9.728 5.888 0 9.728 3.84 9.728 9.728v23.424h2.112zM13.632 777.6c0-7.808 5.824-13.504 13.568-13.504h81.92c7.936 0 13.696 5.696 13.696 13.504 0 7.872-5.76 13.696-13.696 13.696H27.2a14.016 14.016 0 0 1-9.728-3.968 14.784 14.784 0 0 1-3.84-9.728z m433.024-87.68a68.288 68.288 0 0 0 0-97.536 68.288 68.288 0 0 0-97.536 0 68.352 68.352 0 0 0 0 97.536 68.16 68.16 0 0 0 97.536 0zM302.272 368.064c0-7.808 5.888-13.632 13.632-13.632h150.208a13.44 13.44 0 0 1 13.696 13.632 13.376 13.376 0 0 1-13.696 13.696H315.968a15.104 15.104 0 0 1-9.728-3.968c-3.968-3.84-3.968-7.744-3.968-9.728z m0 68.288c0-7.808 5.888-13.632 13.632-13.632H534.4a13.44 13.44 0 0 1 13.824 13.632 13.44 13.44 0 0 1-13.824 13.696H315.968a15.04 15.04 0 0 1-9.728-3.904c-3.968-3.968-3.968-5.824-3.968-9.792z m0 68.288c0-7.872 5.888-13.696 13.632-13.696H411.52a13.44 13.44 0 0 1 13.632 13.696 13.312 13.312 0 0 1-13.632 13.632H315.968a14.72 14.72 0 0 1-9.728-3.968c-3.968-1.856-3.968-5.76-3.968-9.664zM40.896 422.72c-15.616 0-27.264-7.808-35.072-21.44-7.808-13.632-7.808-29.312 0-40.96a40.896 40.896 0 0 1 35.072-21.44c23.488 0 41.024 17.536 41.024 40.96 0 23.296-17.536 42.88-41.024 42.88z m0-21.44a20.416 20.416 0 0 0 17.536-9.728 17.856 17.856 0 0 0 0-19.584c-3.84-7.872-9.728-11.712-17.536-11.712a21.632 21.632 0 0 0-21.376 21.504c1.92 11.648 9.792 19.52 21.376 19.52z m850.496-60.544c-15.552 0-29.44-7.744-35.072-21.44a38.464 38.464 0 0 1 0-40.96c7.68-11.776 21.376-21.44 35.072-21.44 23.36 0 40.96 17.536 40.96 40.96-0.064 23.424-19.456 42.88-40.96 42.88z m0-21.44a20.736 20.736 0 0 0 17.536-9.728c3.968-5.888 3.968-13.696 0-21.44a20.48 20.48 0 0 0-17.536-9.728 21.568 21.568 0 0 0-21.44 21.376c0 9.792 9.728 19.52 21.44 19.52z m0 0" fill="#515151" p-id="8473"></path></svg>
            <span>未填写企业信息</span>
          </slot>
        </div>
      </div>
    </div>
    <div class="info-container">
      <h2>说明</h2>
      <div class="tips">
          企业营业执照作为企业供应身份必验证资质。用于信息验证，企业基本资质验证，年检验证的唯一证书。<br>
          企业名称修改需提供营业执照及更名材料，经审核通过后有效。当企业资质修改后，所有企业相关资质将一并进入到审核状态，经审核通过后生效。<br>
          只有执照审核通过，方可作为供应商，才有权限进一步添加其他资质。
      </div>
    </div>
    <div class="info-container mt20">
      <h2>
        <span>资质管理</span> 
        <el-button type="primary" @click="addCertificationVisible = true" :disabled="isMainUser">添加资质</el-button>
      </h2>
      <div class="qualification-management">
        <RuifoxTable
          v-loading="tableLoading"
          v-model:tableData="tableData"
          :field-list="fieldList"
          :lazy="true"
          :default-checkbox="false"
        >
          <template #default-checkbox="{ element }">
            <div class="table-div-check">
              <el-checkbox
                class="unmover"
                v-model="element.checked"
                @change="handleCheckTable(element.id)"
                size=""
              />
            </div>
          </template>

          <template #expirationStartTime="{ element }" >
            <span>{{formatDate(element.expirationStartTime,"yyyy-MM-dd hh:mm")}}</span>
          </template>

          <template #expirationEndTime="{ element }" >
            <span>{{formatDate(element.expirationEndTime,"yyyy-MM-dd hh:mm")}}</span>
          </template>

          <!-- 是否启用 -->
          <template #state="{ element }" >
            <el-tag v-if="element.state == 1" type="warning">待审核</el-tag>
            <el-tag v-if="element.state == 2" type="success">通过</el-tag>
            <el-tag v-if="element.state == 3" type="danger">不通过</el-tag>
            <el-tag v-if="element.state == 4" type="danger">已过期</el-tag>
          </template>
          <template #options="{ element }">
            <div class="table-td-option unmover">
              <!-- <el-button type="primary" link @click="editNode(element)">
                修改
              </el-button> -->
              <el-button type="danger" link @click="delCertificate(element)">
                删除
              </el-button>
            </div>
          </template>
        </RuifoxTable>
        <!-- 分页器 -->
        <PaginationView
          :isAffix="false"
          :total="queryData.total"
          :pageSize="queryData.pageSize"
          :currentPage="queryData.currentPage"
          :options="batchOptions"
          :checkedNum="checkedNum"
          :canChoose="false"
          @changeSize="handleSizeChange"
          @currentChange="handleCurrentChange"
          @changePageChoose="handlePageChoose"
          @changeAllChoose="handleAllChoose"
          @invertChoose="handleInvertChoose"
          @checkOption="handleBatchOptions"
          @refreshList="getPageCertificate"
          @cancelChoose="handleResetPagination"
        />
      </div>
    </div>
    
    <!-- 添加资质 -->
    <el-dialog v-model="addCertificationVisible" title="添加资质" width="600px">
      <el-form :model="certificationForm" :rules="certificationRules" label-width="100px">
        <el-form-item label="证书名称" props="name">
          <el-select
            v-model="certificationForm.certificatePrefixId"
            placeholder="请选择证书"
            style="width: 240px"
          >
          <el-option
            v-for="item in certificateOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        </el-form-item>
        <el-form-item label="颁发机构" props="lssuingAuthority">
          <el-input v-model="certificationForm.lssuingAuthority"  placeholder="请输入颁发机构" />
        </el-form-item>
        <el-form-item label="证书图片" props="images">
          <div
            class="form-img"
            @click="handleUpload('images')"
          >
            <div class="has-img" v-if="certificationForm.images && certificationForm.images != ''">
              <img :src="certificationForm.images" alt="" />
              <span @click.stop="handleRemoveImg('images')">
                <el-icon><Delete /></el-icon>
              </span>
            </div>
            <el-icon v-else><Plus /></el-icon>
          </div>
        </el-form-item>
        <el-form-item label="颁发时间" props="expirationStartTime">
          <el-date-picker
            v-model="certificationForm.expirationStartTime"
            type="date"
            placeholder="选择颁发时间"
          />
        </el-form-item>
        <el-form-item label="到期时间" props="expirationEndTime">
          <el-date-picker
            v-model="certificationForm.expirationEndTime"
            type="date"
            placeholder="选择到期时间"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addCertificationVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEvaluateSubmit">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改或填写企业信息 -->
    <el-drawer
      v-model="enterpriseDrawer"
      :direction="direction"
      :before-close="handleClose"
      size="650px"
      class="enterprise-drawer"
    >
      <template #header>
        <h4>{{drawTitle}}</h4>
      </template>
      <template #default>
        <div>
          <EnterpriseForm :enterpriseForm="enterpriseForm" ref="enterpriseFormRef"/>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="enterpriseDrawer = false">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer>
    <FilesUpload v-if="showFilesUpload" v-model:showDialog="showFilesUpload" :isPublic="true" @getFileList="insertFiles" :isToJpg="true"></FilesUpload>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { 
  selectUserEntEnterprise, 
  insertEnterprise, 
  updateEnterprise, 
  insertCertificate,
  selectPrefixListCertificate,
  certificateBidding,
  deleteCertificate,
  checkUser
 } from "@/api/supplier";
import EnterpriseForm from "../components/EnterpriseForm.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { tableList as mixTable } from "@ruifox-cms/utils";
import { FilesUpload } from "@ruifox-cms/components"
import { Plus, Delete } from "@element-plus/icons-vue";
import { formatDate } from '@/utils/tools'

const defaultEnterpriseForm = reactive({
  bankAccount: "",
  bankAccountName: "",
  bankName: "",
  businessLicense: "",
  creditCode: "",
  handlingIdCard: ["",""],
  handlingPerson: "",
  legalIdCard: ["",""],
  legalRepresentative: "",
  name: "",
  position: "",
});
const enterpriseForm = ref(defaultEnterpriseForm);

//检查当前用户状态
const isMainUser = ref(true);
const checkUserState = async () => {
  const res = await checkUser();
  if(res.data.isMain == true){
    isMainUser.value = false;
  }
}
//获取当前企业信息
const enterpriseInfo = ref();
const getEnterpriseInfo = async () => {
  const res = await selectUserEntEnterprise();
  if (res.code === 20000) {
    enterpriseInfo.value = res.data;
    queryData.enterpriseId = res.data.id;
    certificationForm.value.enterpriseId = res.data.id;
  }
};

//填写企业信息 抽屉控制
const enterpriseDrawer = ref(false);
const drawTitle = ref("");
const addDrawer = () => {
  drawTitle.value = "添加企业信息";
  enterpriseDrawer.value = true;
};
const showDrawer = () => {
  drawTitle.value = "修改企业信息";
  enterpriseDrawer.value = true;
  enterpriseForm.value = {...enterpriseInfo.value};
};

//提交企业信息
const enterpriseFormRef = ref(null);
const confirmClick = async () => {
  // 校验表单
  if (!enterpriseFormRef.value) return;
  try {
    const valid = await enterpriseFormRef.value.validateForm();
    if (!valid) return;

    // 获取表单数据
    const formData = enterpriseFormRef.value.getFormData();
    console.log('表单数据:', formData);
    //根据标题判断是添加还是修改
    if (drawTitle.value == "添加企业信息") {
      const res = await insertEnterprise(enterpriseForm.value)
      if (res.code === 20000) {
        ElMessage.success("添加成功");
      }
    } else if (drawTitle.value == "修改企业信息") {
      const res = await updateEnterprise(enterpriseForm.value)
      if (res.code === 20000) {
        ElMessage.success("修改成功");
      }
    }
    enterpriseDrawer.value = false;
    getEnterpriseInfo()
  } catch (error) {
    console.error("An error occurred:", error);
  }

};

//表格
const {
  queryData,
  tableData: oriTableData,
  tableLoading,
  checkedNum,
  // isAllChooseBtn,
  // isPageChooseBtn,
  // checkedList,
  // isAllSearch,
  // getTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: certificateBidding,
  // batchFuncApi: deleteByIdsCourse,
});

//分页器
const defaultQuery = reactive({
  total: 10,
  currentPage: 1,
  pageSize: 10,
  enterpriseId: 0
});
Object.assign(queryData, defaultQuery);
const tableData = ref([]);

//获取资质
const getPageCertificate = async () => {
  let res = await certificateBidding(queryData);
  // let res = {
  //   code: 20000,
  //   success: true,
  //   message: "获取所有用户信息",
  //   data: {
  //     total: 3,
  //     currentPage: 2,
  //     pageSize: 15,
  //     list: [
  //       {
  //         id: 1,
  //         name: "医疗器械生产许可证",
  //         issu: "国家",
  //         thumb: ".png",
  //         startTime: "2024-09-10",
  //         endTime: "2025-09-10",
  //         type: 1,
  //         status: 1
  //       },
  //       {
  //         id: 2,
  //         name: "医疗器械经营许可证",
  //         thumb: ".png",
  //         issu: "国家医疗管理",
  //         startTime: "2024-09-10",
  //         endTime: "2025-09-10",
  //         type: "ISO 9001质量管理体系认证",
  //         status: 1
  //       },
  //       {
  //         id: 3,
  //         name: "特殊药品生产许可",
  //         thumb: ".png",
  //         issu: "四川省医药管理局",
  //         startTime: "2024-09-10",
  //         endTime: "2025-09-10",
  //         type: 1,
  //         status: 1
  //       },
  //     ],
  //   },
  // };
  if (res.code == 20000) {
    oriTableData.value = res.data.list;
    tableData.value = res.data.list;
    queryData.total = res.data.total;
  }
};

//获取预设证书列表 
const certificateOptions = ref([]);
const getCertificate = async () => {
  const res = await selectPrefixListCertificate({enterpriseId:enterpriseInfo.value.id})
  if (res.code == 20000) {
    certificateOptions.value = res.data
  }
};
const certificationDefaultForm = reactive({
  certificatePrefixId: "",
  enterpriseId: "",
  expirationStartTime: "",
  expirationEndTime: "",
  images: [""],
  lssuingAuthority: ""
})
const certificationForm = ref(certificationDefaultForm)
const addCertificationVisible = ref(false);

//添加企业资质
const handleEvaluateSubmit = async () => {
  certificationForm.value.expirationStartTime = formatDate(certificationForm.value.expirationStartTime)
  certificationForm.value.expirationEndTime = formatDate(certificationForm.value.expirationEndTime)
  const res = await insertCertificate(certificationForm.value)
  if (res.code === 20000) {
    ElMessage.success("添加成功");
    addCertificationVisible.value = false;
    certificationForm.value = certificationDefaultForm;
    getPageCertificate()
  } else {
    ElMessage.error(res.message);

  }
}
//删除资质
const delCertificate = async (item) => {
  ElMessageBox.confirm("是否删除资质？", "删除确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await deleteCertificate({id: item.id})
    if (res.code === 20000) {
      ElMessage.success("删除成功");
      getPageCertificate()
    }
  });
 
}
// 附件上传
const showFilesUpload = ref(false)
const resourceFormList = ref([])
const insertFiles = filesList => {
  resourceFormList.value = filesList.map(item => {
    return {
      resourceData: {
        title: item.name,
        url: item.url,
      },
      needUpload: item.needUpload,
      tagList: item.tagList || [],
    }
  })
  console.log("resourceFormList.value",resourceFormList.value);
  certificationForm.value.images[0] =  resourceFormList.value[0].resourceData.url
}
const handleUpload = async () => {
  showFilesUpload.value = true
  console.log("点击上传图片");
  console.log("showFilesUpload.value",showFilesUpload.value);
  
};

const handleRemoveImg = () => {
  certificationForm.value.images[0] =  [""]
};
//表格展示字段
const fieldList = ref([
  {
    title: "名称",
    name: "name",
  },
  {
    title: "颁发机构",
    name: "lssuingAuthority",
  },
  {
    title: "颁发时间",
    name: "expirationStartTime",
  },
  {
    title: "到期时间",
    name: "expirationEndTime",
  },
  {
    title: "状态",
    name: "state",
  },
  {
    title: "拒绝原因",
    name: "rejectMsg",
  },
  {
    title: "操作",
    name: "options",
    width: 180,
  },
]);

onMounted(async() => {
  await checkUserState();
  await getEnterpriseInfo();
  await getPageCertificate();
  await getCertificate();
});
</script>
<style scoped lang="scss">
.info-container{
  /* padding: 30px 40px; */
  h2{
    font-size:18px;
    color: #222;
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .info-tips{
    height: 30px;
    background: var(--el-color-warning-light-9);
    border:1px solid var(--el-color-warning-light-8);
    color: var(--el-color-warning);
    line-height: 30px;
    text-align: center;
    font-size: 14px;
  }
  .qualification-management{
    margin-top: 20px;
  }
  &.mt20{
    margin-top: 20px;
  }
}
.count-info {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .right-tips {
    width: 280px;
    p {
      font-size: 14px;
      line-height: 1.4;
      color: #aaa;
    }
  }
}
.tips {
  width: 100%;
  padding: 5px 10px;
  color: #a2a2a2;
  background: #f7f7f7;
  border-radius: 4px;
  font-size: 14px;
  margin-top: 20px;
  line-height: 1.6;
}

.form-data {
  width: 100%;
  /* flex: 1; */
  position: relative;
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 33.3%;
    display: flex;
    /* align-items: center; */
    margin-bottom: 20px;
    p {
      font-size: 14px;
      line-height: 1;
      color: $black;
      &.label {
        width: 120px;
        text-align: right;
        margin-right: 15px;
        white-space: nowrap;
        color: $black_2;
      }
      &.value {
        flex: 1;
        margin-right: 45px;
      }
      .small-img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
        margin-right: 20px;
      }
      .download {
        color: $mainColor;
        &:hover {
          text-decoration: underline;
        }
      }
     
    }
    div.value {
      display: flex;
      .img {
        position: relative;
        background-color: #885a5a;
        width: 160px;
        height: 90px;
        margin-right: 20px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
        .bottom {
          position: absolute;
          bottom: 0;
          left: 0;
          display: block;
          width: 100%;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          background-color: rgba($color: #000, $alpha: 0.5);
          pointer-events: none;
        }
      }
    }
    .user-avatar {
      width: 120px;
    }
    .operation {
      display: flex;
      a {
        color: #8ebbe7;
        font-size: 14px;
        &:hover {
          color: #4d8fd1;
        }
      }
      a + a {
        margin-left: 10px;
        padding-left: 10px;
        border-left: 1px solid #8ebbe7;
      }
    }
  }
}
.form-img{
  height: 100px;
  width: 150px;
  border: 1px dashed $borderColor;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  .has-img{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      max-width: 100%;
      max-height: 100%;
    }
    span{
      display: none;
      position: absolute;
      right: 0;
      top: 0;
      background-color: $failColor;
      height: 20px;
      width: 20px;
      font-size: 18px;
      color: #fff;
    }
    &:hover{
      span{
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  } 
}
::v-deep .el-drawer__body{
  padding-right: 30px;
}
.ruifox-table-new-no-data{
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  padding: 20px 0;
  width: 200px;
  height: 60px;
  svg{
    flex-shrink: 0;
    path{
      fill: #AAAAAA;
    }
  }
  &>i{
    font-size: 80px;
    color: #AAAAAA;
  }
  &>span{
    font-size: 12px;
    color: #AAAAAA;
  }
}
</style>
